<template>
    <div class="jx-content" id ='scrollcontent' >
        <div v-if="tableData !== ''">
            <div class="fl courseName">
                {{Titlename}}
            </div>
            <div class="btn-group fr">
            <el-form :inline="true">
                <el-form-item>
                    <div class="button-style" @click="add">&emsp;新 增&emsp;</div>
                </el-form-item>
                <el-form-item>
                    <div class="button-style" @click="impotInfo" >&emsp;导 入&emsp;</div>
                </el-form-item>
                <el-form-item>
                    <div class="button-style" @click="deleteFn" >批量删除</div>
                </el-form-item>
                <el-form-item>
                    <div class="button-style" @click="orderFn">调整顺序</div>
                </el-form-item>
            </el-form>
            </div>
            <el-table class="chapter-info-table" :data="tableData" style="width: 100%"   tooltip-effect="dark"  @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column type="index" width="55" label="序号"></el-table-column>
                <el-table-column prop="name" label="章节名称" width="280"></el-table-column>
                <el-table-column prop="number" label="章节编号" ></el-table-column>
                <el-table-column prop="typeName" label="章节类型"></el-table-column>
                <el-table-column prop="stepTypeStr" label="步骤类型"></el-table-column>
                <el-table-column prop="introduction" label="章节简介" width="200" show-overflow-tooltip></el-table-column>
                <el-table-column fixed="right" label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button @click.native.prevent="repeatRow(scope.row.id,scope.row.name,scope.row.typeName,scope.row.introduction,scope.row.technologyIds,scope.row.stepTypeStr)"  type="text"  size="small">修改</el-button>
                        <el-button @click.native.prevent="detailRow(scope.row.id,scope.row.typeName,scope.row.name,scope.row.manyExperiment,scope.row.singleTaskId,scope.$index,scope.row.stepTypeStr)"  type="text"   size="small">详情</el-button>
                        <el-tooltip class="item" effect="dark" :content="scope.row.falg == 0 ? '点击关闭学生章节显示' : '点击开启学生章节显示' " placement="bottom" v-if="roleId == 'TEACHER' || roleId == 'MARKET_TEACHER' || roleId == 'UNIVERSITY_TEACHER'">
                            <el-switch
                                v-model="scope.row.falg == 0 ? true : false"
                                :width="28"
                                active-color="#1ac48a"
                                @change="closeSwitch(scope.row.courseId, scope.row.id, scope.row.falg)">
                            </el-switch>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog :close-on-click-modal="false" title="调整排序" :visible.sync="dialogableable" width='530px' >
                 <div class="block" style="margin:0">
                    <span>{{Titlename}}</span>
                    <el-tree
                    :data="dataTree"
                    node-key="id"
                    default-expand-all
                    ref="treeSort"
                    draggable
                    :allow-drop="allowDrop"
                    @node-drag-start="handleDragStart"
                    @node-drag-end="handleDragEnd">
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span class="chapterTitle">{{ node.label }}</span>
                            <span style="position:absolute; right:60px;">{{ data.number }}</span>
                            <span>
                                <i class="iconfont icon-tubiaozhizuomoban1 imgPost"  v-if="data.type == 4" ></i>
                            </span>
                            <span>
                                <i class="iconfont icon-diannao-copy " style=' color: #02aaff;position:absolute; right:20px; margin-top:5px' v-if="data.type == 2 || data.type == 3"></i>
                            </span>
                        </span>
                    </el-tree>
                </div>
                <div class="saveBtn">
                    <button class="button-style saveBtn" @click=" handleNodeClick">保 存</button>
                </div>
            </el-dialog>
        </div>
        <div id="topic-models" v-else>
            <div class="button-center" >
                <span class="button-style" @click="add" >新增</span>
            </div>
            <div class="button-center">
                <span class="button-style" @click="impotInfo" >导入</span>
            </div>
        </div>
        <el-dialog :close-on-click-modal="false" :title="titles" :visible.sync="dialog" width='600px' @close="close"  >
            <el-form ref="form"  label-width="100px" :model="form"  :rules="rules">
                <el-form-item label="章节名称：" prop="name" >
                    <el-input v-model="form.name" maxlength="50"  placeholder="请输入章节名称" @input="dataInput2"></el-input>
                    <p style="position:absolute;  left: 215px; top: 10px; font-size:12px; color:#bbbbbb"> {{form.num}}/50</p>
                </el-form-item>
                <el-form-item label="章节类型：" prop="type" >
                    <el-select v-model="form.type" placeholder="请选择章节类型">
                        <el-option label="理论课" value="理论课"></el-option>
                        <el-option label="实验课" value="实验课"></el-option>
                        <el-option label="理论及单任务实验课" value="理论及单任务实验课"></el-option>
                        <el-option label="理论及多任务实验课" value="理论及多任务实验课"></el-option>
                         <!--<el-option label="多步骤实验课" value="多步骤实验课"></el-option> -->

                    </el-select>
                </el-form-item>
                <el-form-item label="实验步骤  : " v-if="form.type == '理论及单任务实验课'"  style="margin-left:-5px" >
                    <el-radio-group v-model="form.stepTypeStr"  >
                        <el-radio label="单步骤实验"></el-radio>
                        <el-radio label="多步骤实验"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="章节简介：">
                    <el-input type="textarea" v-model="form.desc" maxlength="200" @input="dataInput" placeholder="请输入章节简介"></el-input>
                    <p style="position:absolute;  left: 370px; top: 180px; font-size:12px;color:#bbbbbb"> {{form.titnum}}/200</p>
                </el-form-item>
                <el-form-item  label="所属技能："  prop="skill"  v-if="roleId=='SUPER_ADMIN' || roleId=='INTERNET_ADMIN'">
                     <el-select v-model="form.skill" multiple placeholder="请选择所属技能">
                        <el-option
                        v-for="item in form.skillList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                 <el-form-item>
                    <span style="color:#1277eb"> 提示 : 切换的 '章节类型' 若不包含当前'章节类型' 的内容，将会删除当前 '章节类型' 的资源。</span>
                 </el-form-item>
            </el-form>
            <div class="footer" style="text-align:center">
                <button class="button-style saveBtn" @click="onSubmit('form')">确 认</button>
            </div>
        </el-dialog>
        <el-dialog :close-on-click-modal="false" title="导入" class="filter-wraper" :visible.sync="dialogable" width='600px'  >
            <div class="navBox">
                <span class="reportTemplate"  @click="toggleTabs(0)" :class="{templateCheck:cur == 0}">预置课程</span>
                <span class="testTemplate"  @click="toggleTabs(1)"  :class="{templateCheck:cur == 1}">自定义课程</span>
            </div>
            <el-input
                class="input-wraper"
                placeholder="输入关键字进行过滤"
                v-model="filterText"
            />
            <div  v-show="cur==0">
                <div class="block">
                    <el-tree
                    :data="precutCourse"
                    show-checkbox
                    node-key="id"
                    accordion
                    :filter-node-method="filterNode"
                    ref="precut">
                    <span class="custom-tree-node" slot-scope="{ node, data}">
                        <span class="chapterTitle">{{ node.label }}</span>
                        <span style="position:absolute; right:60px;">{{data.number}}</span>
                        <span>
                            <i class="iconfont icon-tubiaozhizuomoban1 imgPost"  v-if="data.type == 4" ></i>
                        </span>
                        <span>
                            <i class="iconfont icon-diannao-copy"  style='color: #02aaff; position:absolute; right:20px; margin-top:5px' v-if="data.type==2 || data.type==3"></i>
                        </span>
                    </span>
                    </el-tree>
                </div>
                <div class="saveBtn" v-if="precutCourse && precutCourse.length>0">
                    <button class="button-style saveBtn" @click="precutFn">保 存</button>
                </div>
            </div>
            <div  v-show="cur==1">
                <div class="block">
                    <el-tree
                    :data="customCourse"
                    show-checkbox
                    node-key="id"
                    :filter-node-method="filterNode"
                    ref="custom">
                        <span class="custom-tree-node" slot-scope="{ node, data}">
                            <span class="chapterTitle">{{ node.label }}</span>
                            <span style="position:absolute; right:60px;">{{data.number}}</span>
                            <span>
                                <i class="iconfont icon-tubiaozhizuomoban1 imgPost"  v-if="data.type == 4" ></i>
                            </span>
                            <span>
                                <i class="iconfont icon-diannao-copy" style=' color: #02aaff;position:absolute; right:20px; margin-top:5px' v-if="data.type==2 || data.type==3"></i>
                            </span>
                        </span>
                    </el-tree>
               </div>
                <div class="saveBtn" v-if="customCourse && customCourse.length>0">
                    <button class="button-style saveBtn" @click="customFn">保 存</button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    const _ = require('lodash');
    export default {
        data() {
            return {
                //角色
                roleId:'',
                //章节信息
                chapterInfoData:{},
                //标题
                Titlename:'',
                //弹窗标题动态
                titles:'',
                //修改或新增 标识
                flag:'',
                //自定义课程数组
                customCourse:[],
                //预制课程数组
                precutCourse:[],
                //排序数组
                sortData:[],
                //页面的id
                id:'',
                //修改索引
                idIndex:'',
                //弹窗
                dialog:false,
                //导入弹层
                dialogable:false,
                //调整排序
                dialogableable:false,
                multipleSelection:[],
                //章节类表
                tableData: [],
                resultArray:[],
                form:{
                    name:'',
                    type:'',
                    desc:'',
                    titnum:200,
                    num:50,
                    //所属技能
                    skill:[],
                    skillList:[],
                    stepTypeStr:''
                },

                //自定义课程
                dataTree:[],
                rules: {
                    name: [
                        { required: true, message: '请输入名称', trigger: 'blur' },
					],
                    type: [
                        { required: true, message: '请输入类型', trigger: 'blur' }
                    ],
                    desc: [
                        { required: true, message: '请输入章节目标', trigger: 'blur' }
                    ],

                },
                cur:0, //默认选中第一个tab

                //专科版本
                scrollTopLocal:'',
                // 二期需求
                arr2:[],
                checkStrictly: true,
                filterText: '',
            }
        },
        created() {
            //好使的
            this.id = this.$localstorage.getLocalStorage('setCourseId')
            this.Titlename = this.$localstorage.getLocalStorage('CourseTitle')
            this.roleId = this.$store.state.user.roles[0]
            this.init();
            this.CourseTitle()
            this.scrollFns()

        },
        //专科版本建设
        destroyed (){
            window.onscroll = null
        },
        watch: {
            filterText:  _.debounce(function(val) {
                if (this.cur == 0) {
                    this.$refs.precut.filter(val);
                }

                if (this.cur == 1) {
                    this.$refs.custom.filter(val);
                }
            }, 1000)
        },
        methods: {
            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            },
            //滚动条距离
            scrollFns(){
                let self = this
                window.onscroll = function(){
                    let scrollTop =  document.documentElement.scrollTop || document.body.scrollTop;
                    self.$localstorage.putLocalStorage('scrollTop', scrollTop)
                }
            },
            //初始化判断
            init(){
                let self = this
                self.$http.get('/tes/course/'+ self.id+'/chapter/list/owner').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$nextTick(() => {
                            self.tableData = res.data
                        })
                        //已经有章节,判断导航显示
                        self.$parent.mark = false
                        self.$parent.chaperFlag = false
                    }else if(res.code == '404'){
                        self.tableData=''
                        //暂无章节,判断导航显隐藏
                        this.$parent.mark=true
                        this.$parent.chaperFlag=false

                    }
                }).catch(err => {
                    self.$message.error(res.message)
                })
                //   if(this.tableData==''){
                //      //如果列表没有值
                //   }else{
                //      //如果列表有值
                //   }
            },
            //获取课程名称,目的是从首页进来时，课程名称不存在
            CourseTitle(){
                let self = this
                self.$http.get('/tes/course/'+self.id+'/chapter/0').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.Titlename = res.data.courseName
                        this.$localstorage.putLocalStorage('CourseTitle', self.Titlename)
                    }else{
                         self.$message.error(res.message)
                    }
                }).catch(err => {
                     console.log(err)
                })
            },
            //修改信息
            repeatRow(id,name,typeName,introduction,technologyIds,stepTypeStr){
                let self = this
                this.dialog = true
                this.idIndex = id //记录修改的id值
                this.form.name = name
                this.form.type = typeName
                this.form.desc = introduction
                this.form.stepTypeStr = stepTypeStr
                if(this.roleId=='SUPER_ADMIN' || this.roleId=='INTERNET_ADMIN'){
                    self.SelectAll()
                    if(technologyIds !='' && technologyIds != undefined){
                       self.form.skill = technologyIds.split(',').map(Number)
                    }else if(technologyIds ==''){
                        self.form.skill=[]
                    }
                }
                if(introduction &&  introduction.length>0 ){
                   this.form.titnum = 200- introduction.length
                }else{
                    this.form.titnum = 200
                }

                this.flag = 2 //修改标识
                this.titles = '修改章节'
                this.form.num =  50- name.length

            },
            //关闭
            close(){
                this.$nextTick( ()=>{
                    this.$refs.form.resetFields()
                })
            },
            //下拉所有信息
            SelectAll(){
                let self = this
                self.$http.get('/tes/technology/list').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.form.skillList = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //详情
            detailRow(id,typeName,name,manyExperiment,singleTaskId,index,stepTypeStr){
                //为了带着索引 专科版本加的需求
                let $index = index + 1
                if(this.roleId == 'TEACHER' || this.roleId == 'MARKET_TEACHER' ||  this.roleId == 'UNIVERSITY_TEACHER'){ //是老师
                   if(typeName=='理论课'){
                        this.$router.push({
                            path:'/Teaching/Course/Detail/StudyFile'
                        })
                        this.chapterInfoData['chapterId'] = id
                        this.chapterInfoData['chapterType'] = typeName
                        this.chapterInfoData['chapterName'] = name
                        this.chapterInfoData['index'] = $index
                        this.$localstorage.putLocalStorage('chapterInfoData', this.chapterInfoData)
                    }else if(typeName=='实验课'){
                        this.$router.push({
                            path:'/Teaching/Course/experiment/experimentFile'
                        })
                        this.chapterInfoData['chapterId'] = id
                        this.chapterInfoData['chapterType'] = typeName
                        this.chapterInfoData['chapterName'] = name
                        this.chapterInfoData['singleTaskId'] = singleTaskId
                        this.chapterInfoData['index'] = $index
                        this.$localstorage.putLocalStorage('chapterInfoData', this.chapterInfoData)
                    } else if(typeName=='理论及单任务实验课'){

                        if(stepTypeStr == '多步骤实验'){
                            this.$router.push({
                                path:'/Teaching/Course/Step/StepFile'
                            })
                        } else {
                            // 跳转到单步骤实验
                            this.$router.push({
                                path:'/Teaching/Course/Theoretical/StudyFile'
                            })
                        }
                        this.chapterInfoData['chapterId'] = id
                        this.chapterInfoData['chapterType'] = typeName
                        this.chapterInfoData['chapterName'] = name
                        this.chapterInfoData['singleTaskId'] = singleTaskId
                        this.chapterInfoData['index'] = $index
                        this.chapterInfoData['stepTypeStr'] = stepTypeStr
                        this.$localstorage.putLocalStorage('chapterInfoData', this.chapterInfoData)
                    } else{
                        // 理论及多任务实验课
                        this.$router.push({
                            path:'/Teaching/Course/Theoretical/StudyFile'
                        })
                        this.chapterInfoData['chapterId'] = id
                        this.chapterInfoData['chapterType'] = typeName
                        this.chapterInfoData['chapterName'] = name
                        this.chapterInfoData['manyExperiment'] = manyExperiment
                        this.chapterInfoData['singleTaskId'] = singleTaskId
                        this.chapterInfoData['index'] = $index
                        this.$localstorage.putLocalStorage('chapterInfoData', this.chapterInfoData)
                    }
                }else if(this.roleId == 'SUPER_ADMIN' || this.roleId == 'INTERNET_ADMIN' ){
                     if(typeName=='理论课'){
                        this.$router.push({
                            path:'/Admin/Detail/StudyFile'
                        })
                        this.chapterInfoData['chapterId'] = id
                        this.chapterInfoData['chapterType'] = typeName
                        this.chapterInfoData['chapterName'] = name
                        this.chapterInfoData['index'] = $index
                        this.$localstorage.putLocalStorage('chapterInfoData', this.chapterInfoData)
                    }
                    else if(typeName=='实验课'){
                        this.$router.push({
                            path:'/Admin/experiment/experimentFile'
                        })
                        this.chapterInfoData['chapterId'] = id
                        this.chapterInfoData['chapterType'] = typeName
                        this.chapterInfoData['chapterName'] = name
                        //this.$localstorage.putLocalStorage('chapterInfoData', this.chapterInfoData)
                        this.chapterInfoData['singleTaskId'] = singleTaskId
                        this.chapterInfoData['index'] = $index
                        this.$localstorage.putLocalStorage('chapterInfoData', this.chapterInfoData)
                    }else if(typeName=='理论及单任务实验课'){
                        if(stepTypeStr == '多步骤实验'){
                            this.$router.push({
                                path:'/Admin/Step/Stepfile'
                            })
                        } else {
                            // 跳转到单步骤实验
                            this.$router.push({
                                path:'/Admin/Theoretical/StudyFile'
                            })
                        }
                        this.chapterInfoData['chapterId'] = id
                        this.chapterInfoData['chapterType'] = typeName
                        this.chapterInfoData['chapterName'] = name
                        this.chapterInfoData['singleTaskId'] = singleTaskId
                        this.chapterInfoData['index'] = $index
                        this.chapterInfoData['stepTypeStr'] = stepTypeStr
                        this.$localstorage.putLocalStorage('chapterInfoData', this.chapterInfoData)
                    }else{
                        this.$router.push({
                            path:'/Admin/Theoretical/StudyFile'
                        })
                        this.chapterInfoData['chapterId'] = id
                        this.chapterInfoData['chapterType'] = typeName
                        this.chapterInfoData['chapterName'] = name
                        this.chapterInfoData['manyExperiment'] = manyExperiment
                        this.chapterInfoData['singleTaskId'] = singleTaskId
                        this.chapterInfoData['index'] = $index
                        this.$localstorage.putLocalStorage('chapterInfoData', this.chapterInfoData)
                    }
                }

            },
            //切换事件
            toggleTabs(index){
                this.cur = index;
                this.filterText = '';
                if (index == 0) {
                    this.$refs.precut.filter('');
                }

                if (index == 1) {
                    this.$refs.custom.filter('');
                }
            },
            //新增
            add(){
                this.dialog = true
               // this.close()
                if(this.roleId=='SUPER_ADMIN' || this.roleId=='INTERNET_ADMIN'){
                   this.SelectAll()
                   this.form.skill=[]
                }
                this.form.name = ''
                this.form.type = ''
                this.form.desc = ''
                this.form.titnum = 200
                this.form.num = 50
                this.flag = 1 //新增标识
                this.titles = '添加章节'
                this.form.stepTypeStr  = ''
            },
            //拖拽方法
            allowDrop(draggingNode, dropNode, type2){
                if(draggingNode.level === dropNode.level){
                    if(draggingNode.parent.id === dropNode.parent.id){
                       return type2 === 'next' || type2 === 'prev'
                    }
                }

              },
             //开始排序
            handleDragStart(){
                //排序分两种情况 1 如果用户没排序，点击保存传值，2 如果用户拖拽多次
                this.$set(this.sortData,'length',0)
            },
             //调整排序
            orderFn(){
                this.sort()
                this.dialogableable = true
                this.$set(this.sortData,'length',0)
            },
            //获取调整排序的数据
            sort(){
                let self = this
                self.$http.get('/tes/course/'+ self.id+'/chapter/ztree').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                       //  self.dataTree = res.data
                         let result =[]
                         for(let i =0 ; i< res.data[0].children.length; i++){
                               let current=  res.data[0].children[i]
                               let label = '第'+ (i+1)+ '章 ' + res.data[0].children[i].label
                                result.push({
                                    ...current,
                                    label:label
                                })
                         }
                         self.dataTree = result
                         for(var i =0; i< self.dataTree.length; i++){
                              self.sortData.push( self.dataTree[i].id)
                         }
                    }
                })
                .catch(err => {
                     console.log(err)
                })
            },
            //排序
            handleDragEnd(draggingNode,node,location){
                let result2 = []
                let self = this
                //  for(let i = 0,len = node.parent.data.children.length; i<len;i++){
                //        let idlist= node.parent.data.children[i].id
                //        self.sortData.push(idlist)
                //   }
                for(let i = 0,len = self.dataTree.length; i<len;i++){
                    let current = self.dataTree[i]
                    let label = current.label.replace(/第(\d{1,})章/g, '第'+(i+1)+'章 ');
                    result2.push({ ...current,label:label})

                }
                 self.dataTree = result2

                for(var i =0; i<result2.length; i++){
                     //此处是将id值加入到排序的数组
                     self.sortData.push(result2[i].id)
                 }

            },

            //调整顺序的保存
            handleNodeClick(){
                let self = this
                self.$http.post('/tes/course/'+ self.id+'/chapter/order-adjustments',self.sortData)
                .then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                       self.dialogableable = false
                       self.init()
                    }
                 })
                 .catch(err => {
                    console.log(err)
                  }
                )
            },

            //获取导入数据
            importData(){
                let self = this
                //1 预制课程  0 自定义课程
                self.$http.get('/tes/course/'+self.id+'/ztree?type=1').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.precutCourse = res.data
                    }
                }).catch(err => {
                     console.log(err)
                })
            },
             //获取自定义数据
            importCustomData(){
                let self = this
                //1 预制课程  0 自定义课程
                self.$http.get('/tes/course/'+self.id+'/ztree?type=0').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.customCourse = res.data
                    }else{
                       self.$message.error(res.message)
                    }
                }).catch(err => {
                     console.log(err)
                })
            },
            //导入
            impotInfo(){
                this.dialogable = true;
                this.filterText = '';
                this.importData();
                this.importCustomData();
            },
            //全选
            handleSelectionChange(val) {
                let valArr = []
                for(let i = 0; i < val.length; i++){
                    valArr.push(val[i].id)
                }
                this.multipleSelection = valArr
            },
            //删除章节
            deleteFn(){
               let self = this;
				if(self.multipleSelection.length == 0){
                    self.$message({
                        message: '请选择要删除的章节',
                        type: 'warning'
                    })
					return
                }
				self.$confirm('是否删除选中?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					self.$http.post('/tes/course/'+self.id+'/chapter/batch-delete/',self.multipleSelection).then((response) => {
						let res = response.data;
						if(res.code == '200'){
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            self.init()
                        }else{
                           self.$message.error(res.message)
                        }
					},(err) => {
						console.log('err');
					})
				}).catch(() => {
				})
            },
            //字数限制
            dataInput(){
                var txtVal = this.form.desc.length;
                this.form.titnum = 200 - txtVal
            },
             //字数限制
            dataInput2(){
                var txtVal = this.form.name.length;
                this.form.num = 50 - txtVal
            },
            //确认
            onSubmit(form){
                let self=this
                if( self.flag == 1){ //添加
                    self.$refs[form].validate((valid) => {
                    if (valid) {
                        const loading = this.$loading({
                            lock: true,
                            text: '文件保存中...',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        })
                    self.$http.post('/tes/course/'+self.id+'/chapter/',{
                        introduction: self.form.desc,
                        name:self.form.name,
                        typeName: self.form.type,
                        technologyIdList:self.form.skill,
                        stepTypeStr: self.form.stepTypeStr
                    }).then((response) => {
                        let res = response.data
                        if(res.code == '200') {
                            this.$message({
                                message: '保存成功',
                                type: 'success'
                            })
                            self.init()
                            self.dialog = false
                            loading.close()
                        }else{
                            self.$message.error(res.message)
                            loading.close()
                        }
                        }).catch(err => {
                            loading.close()
                            console.log(err)
                        })
                      }
                   })

                }else if(self.flag == 2){  //修改
                    self.$refs[form].validate((valid) => {
                        if (valid) {
                             self.$confirm('是否确定修改?', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(() => {
                            self.$http.put('/tes/course/'+self.id+'/chapter/'+ self.idIndex+'',{
                                introduction: self.form.desc,
                                name:self.form.name,
                                typeName: self.form.type,
                                technologyIdList:self.form.skill,
                                stepTypeStr: self.form.type == '理论及单任务实验课'? self.form.stepTypeStr  :  ''
                            }).then((response) => {
                                let res = response.data
                                if(res.code == '200') {
                                    this.$message({
                                        message: '保存成功',
                                        type: 'success'
                                    })
                                    self.init()
                                    self.dialog = false

                                    //章节信息不加高亮
                                }else{
                                    self.$message.error(res.message)
                                }
                            })

                        })
                    }
                })

              }
            },
            //预置课程
            precutFn() {
                let self = this
                let union=[]
                let arrlists2 = this.$refs.precut.getCheckedKeys()
                if(arrlists2.length==''){
                    self.$message({
                        message: '请选择导入的章节',
                        type: 'warning'
                    })
                    return
                }
                if(arrlists2.includes(undefined)){
                    union=arrlists2.filter(function(item){
                        return item != undefined
                    })
                    if(union == ''){
                        self.$message({
                            message: '请选择导入的章节',
                            type: 'warning'
                        });
                        return
                    }
                }else{
                    union=arrlists2
                }
                const loading = this.$loading({
                    lock: true,
                    text: '正在保存中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                self.$http.post('/tes/course/'+self.id+'/chapter/import-exist?type=1',union) .then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                         self.$message({
                            message: '保存成功',
                            type: 'success'
                         })
                         self.init()
                         self.dialogable = false
                         self.$set(self.multipleSelection,'length',0)
                         loading.close()
                    } else {
                        loading.close();
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                     console.log(err)
                     loading.close()
                })
            },
            //自定义课程
            customFn(){
                let self = this
                let union = []
                let arrlistscustom = this.$refs.custom.getCheckedKeys()
                if(arrlistscustom.length==''){
                    self.$message({
                        message: '请选择导入的章节',
                        type: 'warning'
                    });
                    return
                }

                if(arrlistscustom.includes(undefined)){
                    union=arrlistscustom.filter(function(item){
                        return item != undefined
                    })
                    if(union == ''){
                        self.$message({
                            message: '请选择导入的章节',
                            type: 'warning'
                        });
                        return
                    }
                }else{

                    union=arrlistscustom
                }
                const loading = this.$loading({
                    lock: true,
                    text: '正在导入中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                console.log(123213);
                self.$http.post('/tes/course/'+self.id+'/chapter/import-exist?type=1',union) .then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                         self.$message({
                            message: '保存成功',
                            type: 'success'
                         })
                         self.init()
                         self.dialogable = false
                         self.$set(self.multipleSelection,'length',0)
                         loading.close()
                    }else{
                         self.$message.error(res.message)
                         loading.close()
                    }
                }).catch(err => {
                    console.log(err)
                    loading.close()
                })
            },

            // 二期需求
            // 开关
            closeSwitch(courseId, id, falg){
                let self = this
                self.$http.put('/tes/course/'+courseId+'/chapter/'+id+'/falg',{
                    falg: falg == 0 ? true : false,
                    type: 0
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.init()
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            }
        },
        //专科版本监控路由
        beforeRouteEnter (to, from, next) {
            next(vm => {
                if(from.name == 'experimentFile' || from.name == 'StudyMaterials' || from.name == 'StudyFile' || from.name == 'StudyMaterials' || from.name == 'StudyResourse' || from.name =='PracticeItemBankExperimentFile'  || from.name =='PracticeItemBankExperimentFileTheoretical'  || from.name == 'PracticeItemBankCreativeCourse' ){
                    vm.scrollTopLocal = vm.$localstorage.getLocalStorage('scrollTop')
                    //console.log(vm.scrollTopLocal,8888);//当前组件的实例
                    $('html,body').animate({
                        scrollTop: vm.scrollTopLocal+'px'
                    }, 600);
                }

            });
        }
    }
</script>
<style lang="scss">
    .filter-wraper {
        .input-wraper {
            margin-top: 20px;
            .el-input__inner {
                width: 100%;
            }
        }
    }
    .el-tooltip__popper{max-width:30%;line-height: 22px;}
    .chapter-info-table .el-switch__core{
        width: 28px;
        height: 16px;
    }
    .chapter-info-table .el-switch{
        margin-left: 15px;
    }
    .chapter-info-table .el-switch.is-checked .el-switch__core::after{
        margin-left: -13px;
    }
    .chapter-info-table .el-switch__core:after{
        width: 12px;
        height: 12px;
    }
</style>
<style scoped>
    /* #tree1>>>.el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner{
        display: inline-block
    }
    #tree1>>> .el-tree-node .el-checkbox .el-checkbox__inner{
        display: none;
    } */
    /* #tree1>>>.el-tree-node__content label.el-checkbox {
        display: none;
    }
    #tree1>>>.el-tree-node__children label.el-checkbox {
        display: inline-block;
        margin-left: -17px;
    } */
    .imgPost{
        vertical-align: inherit;
        position: absolute;
        right: 17px;
        color: rgb(2, 170, 255);
        font-size: 18px;
        padding-top: 5px;
    }
    .el-button--small:hover{
        color: #1277eb;
    }
    /* 调整拖拽样式 */
    /* .el-tree>>>.el-tree__drop-indicator {
        position: absolute;
        left: 0;
        right: 0;
        top: -30px;
        background: #fff;
        opacity: 1;
        height: 30px;
    } */
    /* .el-tree>>>.el-tree-node__content:hover{
        background: #1277eb
    } */
    .el-tree>>> .el-tree-node{
        margin: 6px 0;
    }
    .el-form-item>>>.el-input__inner {
        width: 200px;
        height: 32px;
        border-radius: 4px;
    }
    .el-form>>>.el-textarea__inner {
        height: 200px;
        width: 350px;
        resize: none;
    }
    .el-form-item {
        margin-bottom: 22px;
    }
    .el-form-item>>>.el-form-item__content{
        height: auto;
    }
    .block::-webkit-scrollbar{
        width: 2px;
    }
    .block::-webkit-scrollbar-thumb {
        background: #dededd;
        border-radius:50px;
    }

    .chapterTitle{
        width: 390px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow:ellipsis;
        display: inline-block
     }
     .custom-tree-node{
         padding-top: 10px;
     }

</style>
<style lang="scss" scoped>



    @import "./../../../styles/ypublic.scss";
    .jx-content {
        width: 1200px;
        margin: 20px auto;
        .courseName{
            font-size: 18px;
        }
        #topic-models{
            padding: 200px 0;
            .button-center{
                text-align: center;
                .button-style{
                    text-align: center;
                    height:48px;
                    line-height: 48px;
                    border-radius: 48px;
                    padding:0 106px;
                    margin:10px;
                }
            }
        }
        .navBox{
            .reportTemplate{
                padding-bottom: 10px;
                margin-left: 190px;
                cursor: pointer;
            }
            .testTemplate{
                padding-bottom: 10px;
                margin-left: 40px;
                cursor: pointer;
            }
            .templateCheck{
                border-bottom:2px solid $yBlue;
                color: $yBlue;
                cursor: pointer;
            }
        }
        .block{
            margin: 20px 0;
            overflow-y: scroll;
            height: 483px;
        }
        .saveBtn{
            text-align: center;
            margin-top: 10px;
        }
    }
</style>

